<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜品管理</title>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/constant.js"></script>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>
        .myHidden{
            display: none;
        }
    </style>
</head>
<body>
<button class="layui-btn layui-btn-normal" id="addBtn">添加</button>
<table id="demo" lay-filter="test"></table>

<div id="editDish" style="display: none;padding: 15px;">
    <div style="padding-top: 5px;padding-bottom:5px;" id="didDiv">菜品编号:<span id="did"></span></div>
    <form id="myForm">
        <div style="padding-top: 5px;padding-bottom:5px;">菜品名称:<input type="text" id="dname" max="10" min="1"/></div>
        <div style="padding-top: 5px;padding-bottom:5px;">菜品价格:<input type="number" id="dprice" max="10" min="1"/></div>
    </form>
    <button id="submit" class="layui-btn-normal" style="padding: 8px;"></button>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var OBJ;
    var INDEX;
    var table;
    var tableIns;

    $(function(){
        $("#addBtn").click(function () {
            $("#did").val("");
            document.getElementById("myForm").reset();
            $("#submit").text("确认添加");
            $("#submit").attr("onclick","addDish()");
            $("#didDiv").attr("class","myHidden");
            INDEX=layer.open({
                type: 1
                ,content: $("#editDish")
            });
        });
    });
    layui.use('table', function(){
        table = layui.table;
        //第一个实例
        tableIns=table.render({
            id:'demo'
            ,elem: '#demo'
            ,width:585
            ,height: 500
            ,url: RequestURL+'/admin/getDishByPage' //数据接口
            ,page: true //开启分页
            ,limit: 10
            ,cols: [[ //表头
                {field: 'did', title: '菜品编号', width:120, fixed: 'left'}
                ,{field: 'dname', title: '菜品名称', width:150}
                ,{field: 'dprice', title: '菜品价格', width:150,sort:true}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]]
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            OBJ=obj;
            let data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                let r = confirm('真的删除\"'+data.did+'.'+data.dname+'\"吗？');
                if(r){
                    obj.del(); //删除对应行（tr）的DOM结构
                    //layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type:'post',
                        url: RequestURL+"/admin/deleteDish",
                        data: {
                            "did": data.did
                        },
                        success: function(data) {
                            alert('删除成功');
                            tableIns.reload();
                        }
                    });
                };
            } else if(layEvent === 'edit'){
                $("#didDiv").removeAttr("class");
                $("#did").text(data.did);
                $("#dname").val(data.dname);
                $("#dprice").val(data.dprice);
                $("#submit").text("保存修改");
                $("#submit").attr("onclick","editDish()");
                INDEX=layer.open({
                    type: 1
                    ,content: $("#editDish")
                });

            }
        });
    });

    function addDish() {
        let dprice = $("#dprice").val().trim();
        if(Number(dprice)<=0){
            alert("请输入正确的价格！");
            return false;
        }
        let dname = $("#dname").val().trim();
        if(dname==''||dname==null){
            alert("请输入名称！");
            return false;
        }
        $.ajax({
            type:'post',
            url: RequestURL+"/admin/addDish",
            data: {
                "dname":dname,
                "dprice":dprice
            },
            success: function(data) {
                alert('添加成功');
                layer.close(INDEX);
                tableIns.reload();
            }
        });
    }

    function editDish(){
        let dprice = $("#dprice").val().trim();
        if(Number(dprice)<=0){
            alert("请输入正确的价格！");
            return false;
        }
        let dname = $("#dname").val().trim();
        if(dname==''||dname==null){
            alert("请输入名称！");
            return false;
        }
        $.ajax({
            type:'post',
            url: RequestURL+"/admin/editDish",
            data: {
                "did": $("#did").text(),
                "dname":dname,
                "dprice":dprice
            },
            success: function(data) {
                alert('修改成功');
                OBJ.update({
                    dname: dname,
                    dprice:dprice
                });
                layer.close(INDEX);
            }
        });
    }

</script>
</body>
</html>